<template>
  <div>
    <!-- <el-button type="text" round @click="addShouShu">新增手术</el-button> -->
    <el-button size="mini" @click="addShouShu">新增手术</el-button>
    <el-table :data="nowData" style="width: 100%">
      <el-table-column align="center" label="病案号">
        <template slot-scope="scope">
          <span>{{ scope.row.fgNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="第几次入院">
        <template slot-scope="scope">
          <span>{{ scope.row.fgTimes }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="患者姓名">
        <template slot-scope="scope">
          <i class="el-icon-user"></i>
          <span>{{ scope.row.fgName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.fgSex }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份证号码">
        <template slot-scope="scope">
          <span>{{ scope.row.fgIdNum }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="170px">
        <template slot-scope="scope">
          <el-button size="mini" @click="selectXq(scope.row)">查看详情</el-button>
          <!-- <el-button size="mini" @click="updataShouShu(scope.row)">修改</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination layout="prev, pager, next" :page-count="Math.ceil(shouShuData.length / 5)" @current-change="handleCurrentChange"></el-pagination>
    </div>
    <el-dialog title="我的手术" :visible.sync="shouShuVisible" :modal="false" width="55%">
      <el-table :data="myShouShuData" style="width: 100%">
        <el-table-column align="center" label="手术日期">
          <template slot-scope="scope">
            <span>{{ scope.row.operationDate }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手术名称">
          <template slot-scope="scope">
            <span>{{ scope.row.operationName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="麻醉">
          <template slot-scope="scope">
            <span>{{ scope.row.operationHocus }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手术医师">
          <template slot-scope="scope">
            <span>{{ scope.row.doctorName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="170px">
          <template slot-scope="scope">
            <el-button size="mini" @click="selectMyXq(scope.row)">查看详情</el-button>
            <!-- <el-button size="mini" @click="updataShouShu(scope.row)">修改</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" :page-count="Math.ceil(xqData.length / 5)" @current-change="myShouShuNowPage"></el-pagination>
      </div>
    </el-dialog>
    <el-dialog :title="myTitle" :visible.sync="addDataVisible" :modal="false" width="56%">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item v-if="myTitle == '修改手术'" label="病案号" :label-width="formLabelWidth" prop="fgNum">
          <el-input v-model="addForm.fgNum" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item v-if="myTitle == '新增手术'" label="病案号" :label-width="formLabelWidth" prop="fgNum">
          <!-- <el-input v-model="addForm.fgNum" autocomplete="off"></el-input> -->
          <el-select v-model="addForm.fgNum" placeholder="请选择病案号" @change="selectMyTimes">
            <el-option :label="item" :value="item" v-for="(item, index) in myAllBrBaForm" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="myTitle == '查看手术详情'" label="病案号" :label-width="formLabelWidth" prop="fgNum">
          <el-input v-model="addForm.fgNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="第几次入院" v-if="myTitle == '修改手术'" :label-width="formLabelWidth" prop="fgTimes">
          <el-input v-model="addForm.fgTimes" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="第几次入院" v-if="myTitle == '新增手术'" :label-width="formLabelWidth" prop="fgTimes">
          <el-input v-model="addForm.fgTimes" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="手术日期" :label-width="formLabelWidth" prop="operationDate">
          <el-date-picker v-model="addForm.operationDate" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="手术名称" :label-width="formLabelWidth">
          <el-select v-model="addForm.operationName" placeholder="请选择手术名称">
            <el-option :label="item.operationName" :value="item.operationName" v-for="(item, index) in myAllName" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="疾病名称" :label-width="formLabelWidth" v-if="myTitle == '新增手术'">
          <el-input v-model="addForm.operationCode" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="麻醉" :label-width="formLabelWidth">
          <!-- <el-input v-model="addForm.operationHocus" autocomplete="off"></el-input> -->
          <el-select v-model="addForm.operationHocus" placeholder="请选择麻醉方式">
            <el-option label="静脉麻" value="静脉麻"></el-option>
            <el-option label="吸入麻" value="吸入麻"></el-option>
            <el-option label="局麻" value="局麻"></el-option>
            <el-option label="硬膜外麻" value="硬膜外麻"></el-option>
            <el-option label="硬膜外麻+局麻" value="硬膜外麻+局麻"></el-option>
            <el-option label="静脉麻+局麻" value="静脉麻+局麻"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="切口" :label-width="formLabelWidth">
          <el-input v-model="addForm.operationCut" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手术医师" :label-width="formLabelWidth">
          <!-- <el-input v-model="addForm.operationDoctorName" autocomplete="off"></el-input> -->
          <el-select v-model="addForm.doctorName" placeholder="请选择手术医生">
            <el-option :label="item.doctorName" :value="item.doctorNo" v-for="(item, index) in myAllDc" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="myTitle == '新增手术'">
        <el-button @click="aaa">取 消</el-button>
        <el-button type="primary" @click="addShouShuQd">确 定</el-button>
      </div>
      <div slot="footer" class="dialog-footer" v-if="myTitle == '修改手术'">
        <el-button @click="aaa">取 消</el-button>
        <el-button type="primary" @click="updataShouShuQd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import tishi from '../../../mixins/tishi';

export default {
  mixins: [tishi],

  data() {
    return {
      shouShuVisible: false,
      shouShuData: [],
      nowPage: 1,
      xqData: [],
      myTitle: '',
      addDataVisible: false,
      addForm: {},
      formLabelWidth: '100px',
      myAllBrBaForm: [],
      myAllDc: [],
      myAllName: [],
      rules: {
        fgNum: { required: true, message: '请输入病案号', trigger: 'blur' },
        fgTimes: { required: true, message: '请输入第几次入院', trigger: 'blur' },
        operationDate: { required: true, message: '请选择手术时间', trigger: 'change' },
      },
      myNowPage: 1,
    };
  },
  created() {
    this.selectCeShi();
  },
  computed: {
    nowData: function() {
      return this.shouShuData.slice((this.nowPage - 1) * 2, this.nowPage * 2);
    },
    myShouShuData: function() {
      return this.xqData.slice((this.myNowPage - 1) * 5, this.myNowPage * 5);
    },
  },
  methods: {
    ...mapActions(['tongyong']),
    myShouShuNowPage(val) {
      this.myNowPage = val;
    },
    selectAllDc() {
      this['tongyong']({
        name: 'SELECT_ALLSHOUSHUDC',
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myAllDc = { ...resp.data.data };
        }
      });
    },
    selectAllShouShuName() {
      this['tongyong']({
        name: 'SELECT_ALLSHOUSHUNAME',
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myAllName = { ...resp.data.data };
        }
      });
    },
    selectCeShi() {
      this['tongyong']({
        name: 'SELECT_SHOUSHUBR',
        data: {
          doctorNo: 'Z00001',
        },
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myAllBrBaForm = [];
          this.shouShuData = [...resp.data.data];
          resp.data.data.forEach(element => {
            this.myAllBrBaForm.push(element.fgNum);
          });
        }
      });
    },
    async selectXq(data) {
      this.shouShuVisible = true;
      this.xqData = [];
      this.myNowPage = 1;
      await this['tongyong']({
        name: 'SELECT_MYALLSHOUSHU',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.xqData = [...resp.data.data];
        }
      });
    },
    async selectMyXq(data) {
      this.myTitle = '查看手术详情';
      this.addDataVisible = true;
      await this['tongyong']({
        name: 'SELECT_MYSHOUSHU',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.addForm = { ...resp.data.data };
        }
      });
    },
    handleCurrentChange(val) {
      this.nowPage = val;
    },
    //新增
    addShouShu(data) {
      this.myTitle = '新增手术';
      this.addDataVisible = true;
      this.selectAllDc();
      this.selectAllShouShuName();
    },
    aaa() {
      this.addDataVisible = false;
    },
    async addShouShuQd(data) {
      // this.addForm.operationDate = this.changetime(this.addForm.operationDate);
      // console.log(this.addForm.operationDate);

      this.addForm.operationDate = this.changetime(this.addForm.operationDate);
      // this.addForm.operationCode = this.addForm.diseaseIcd9;
      await this.$refs['addForm'].validate(valid => {
        if (valid) {
          //通过验证执行
          this['tongyong']({
            name: 'ADD_SHOUSHU',
            data: { ...this.addForm, operationCode: this.addForm.diseaseIcd9, operationDoctorName: this.addForm.doctorName },
          }).then(resp => {
            if (resp == 500) {
              this.$message({
                type: 'error',
                message: '服务器出错,请稍等',
              });
            } else {
              this.tankuang('新增', resp.data.code);
              this.addDataVisible = false;
            }
          });
        } else {
          //验证失败执行
          this.addForm.operationDate = '';
          this.$message({
            type: 'error',
            message: '请补全信息',
          });
          return false;
        }
      });
    },
    selectMyTimes(val) {
      this['tongyong']({
        name: 'SELECT_MYTIMES',
        data: {
          fgNum: val,
        },
      }).then(resp => {
        if (resp.data.code == 200) {
          this.addForm = { ...resp.data.data };
          this.addForm.operationCode = resp.data.data.fgMainDiagnose;
        } else if (resp.data.code == 1001) {
          this.addForm = {};
          this.$message({
            type: 'error',
            message: '没有相关信息',
          });
        }
      });
    },
    //修改

    //时间格式转换
    padDate(value) {
      return value < 10 ? '0' + value : value;
    },
    changetime(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      let month = this.padDate(date.getMonth() + 1);
      let d = this.padDate(date.getDate());
      let xiaoshi = this.padDate(date.getHours());
      let fenzhong = this.padDate(date.getMinutes());
      let miao = this.padDate(date.getSeconds());
      return `${year}-${month}-${d} ${xiaoshi}:${fenzhong}:${miao}`;
    },
  },
};
</script>
<style lang="less" scoped></style>
